
<template>
  <div>
    <el-table :data="tableData" :border="true" highlight-current-row @cell-dblclick="celldblclick">
      <el-table-column
        :label="item.title"
        :prop="item.props"
        v-for="(item, index) in tableTitle"
        :key="index"
        :width="item.width"
      ></el-table-column>

      <el-table-column :width="130">
        <template slot="header" slot-scope="scope">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              下达状态{{scope.rows}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="y">已下达</el-dropdown-item>
              <el-dropdown-item command="n">未下达</el-dropdown-item>
              <el-dropdown-item command="a" divided>全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template slot-scope="scope">{{scope.row.Status>0?'已下达':'未下达'}}</template>
      </el-table-column>
      <!-- prop="misstionType" -->
      <el-table-column prop="misstionType" :width="130">
        <template slot="header" slot-scope="scope">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              任务类型{{scope.rows}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="y">a</el-dropdown-item>
              <el-dropdown-item command="n">b</el-dropdown-item>
              <el-dropdown-item command="a" divided>全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column prop="montype" :width="130">
        <template slot="header" slot-scope="scope">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              监测分类{{scope.rows}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="y">a</el-dropdown-item>
              <el-dropdown-item command="n">b</el-dropdown-item>
              <el-dropdown-item command="a" divided>全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column align="right" :width="280">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            @keyup.enter.native="handleInputConfirm"
            placeholder="输入关键字搜索"
          />
          {{scope.rows}}
        </template>
        <template slot-scope="scope" v-if="canEdit">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    handleCommand (command) {
      this.$message('click on item ' + command)
    },
    handleInputConfirm () {
      // 搜索框 回车 根据search的内容来filter filterTableData 里的数据
      this.getProjectData()
      // if (this.search.length > 0) {
      //   this.axios
      //     .get('/Project/SearchProejctData', {
      //       params: {
      //         pageIndex: this.currentPage,
      //         pageSize: this.pagesize,
      //         serach: this.search
      //       }
      //     })
      //     .then(response => {
      //       console.log(response.data)
      //       this.tableData = response.data
      //     })
      // }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getProjectData()
    },
    handleCurrentChange (val) {
      console.log(`当前页 ${val} 条`)
      this.currentPage = val
      this.getProjectData()
    },
    handleEdit (index, row) {
      // 弹框出现编辑页面
      console.log(index, row)
    },
    handleDelete (index, row) {
      // console.log(index, row)
      this.tableData.splice(index, 1)
      // axios
    },
    celldblclick (row, column, cell, event) {
      console.log(row, column, cell, event)
    },
    getProjectData () {
      this.axios
        .get('/Project/GetProejctData', {
          params: {
            pageIndex: this.currentPage,
            pageSize: this.pagesize,
            search: this.search
          }
        })
        .then(response => {
          console.log(response.data)
          this.tableData = response.data
        })
    }
  },
  mounted () {
    this.getProjectData()
  },
  computed: {
    total () {
      return this.tableData.length
    }
  },
  updated: function () {
    // 这个emit放在updated 原因是
    // 只有当currentPage pagesize改变的时候就会重新POST请求后端 但是如果当这两个值同时改变渲染的情况 就会调用两次 updated
    // 所以每当这两个Data改变的时候就重新AXIOS请求一次
    // this.$emit('updatedtest',this.currentPage) 放在这里是找打 tableData 改一次 重新渲染一次 updated 一次
  },
  data () {
    return {
      pagesizes: [10, 20, 30, 40],
      canEdit: true,
      pagesize: 10,
      currentPage: 1,
      search: '',
      tableTitle: [
        { title: '任务编号', props: 'missionNo', width: '300' },
        { title: '任务名称', props: 'missionName', width: '600' },
        { title: '立项人', props: 'createPersonName' },
        { title: '开始时间', props: 'startDate' },
        { title: '结束时间', props: 'endDate' }
      ],
      tableData: [
        {
          missionNo: '2019011508',
          missionName: '2018年水质月报(2018年12月)',
          misstionType: '环境质量',
          montype: '地表水监测',
          createPersonName: '王五',
          startDate: '2019-04-01',
          endDate: '2019-06-02',
          Status: '已下达'
        }
      ]
    }
  }
}
</script>

<style lang="stylus">

.el-table
  border-radius 10px
</style>

// import JZtable from '@/components/JZTable.vue
// import IndexProjectTable from '@/components/table/indexProjectTable.vue'
// export default {
//   components: {
//     JZtable,
//     IndexProjectTable
//   },
//   methods: {
//     handleSizeChangeTest(val, val2) {
//       this.$message(`这里更新tableData ${val} + ${val2}`)
//     },
//     searchInputConfirm(search, currentPage, pagesize) {
//       this.$message('搜索并分页', search, currentPage, pagesize)
//     },
//     updateData(pageIndex, pagesize) {
//       console.log(`index:${pageIndex}, size= ${pagesize}`)
//     }
//   },
//   data() {
//     const s = {
//       date: '2016-05-02',
//       name: '王小虎1',
//       address: '上海市普陀区金沙江路 1518 弄'
//     }
//     return {
//       tableData: Array(42).fill(s),
//       tableTitle: [
//         { title: '时间1', props: 'date', width: '400' },
//         { title: '姓名2', props: 'name' },
//         { title: '地址3', props: 'address' }
//       ]
//     }
//   }
// }
//
